<template>
  <el-container>
    <el-row><common-head child-name="查看商品"></common-head></el-row>

    <el-main>

      <el-card class="box-card" shadow="hover" body-style="width: 250px">
        <div class="text item">

<!--        <table class="demo-form-inline" v-model="showCommodity">-->
<!--        <tr>&nbsp;</tr>-->
<!--        <tr style="font-size: medium">商品名称：&nbsp;&nbsp;{{showCommodity.commodityName}}</tr>-->
<!--        <tr style="font-size: medium">商品标题：&nbsp;&nbsp;{{showCommodity.commodityTitle}}</tr>-->
<!--        <tr style="font-size: medium">商品分类：&nbsp;&nbsp;{{showCommodity.commodityCategory}}</tr>-->
<!--        <tr style="font-size: medium">商品编码：&nbsp;&nbsp;{{showCommodity.commodityCode}}</tr>-->
<!--        <tr style="font-size: medium">商品图片：&nbsp;&nbsp;{{showCommodity.commodityPicture}}</tr>-->
<!--        <tr style="font-size: medium">商品价格：&nbsp;&nbsp;{{showCommodity.commodityPrice}}</tr>-->
<!--        <tr style="font-size: medium">商品库存：&nbsp;&nbsp;{{showCommodity.commodityStock}}</tr>-->
<!--        <tr style="font-size: medium">商品描述：&nbsp;&nbsp;{{showCommodity.commodityDescription}}</tr>-->
<!--          <tr>&nbsp;</tr>-->
<!--          <el-button style="float: contour" type="primary" @click="back">返回</el-button>-->
<!--        </table>-->

          <el-form v-model="showCommodity" class="demo-form-inline" style="text-align: left">

            <el-form-item style="font-size: medium; font-weight: bold" label="商品名称：">
              <el-input :disabled="true" v-model="showCommodity.commodityName" placeholder="商品名称"></el-input>
            </el-form-item>

            <el-form-item style="font-size: medium; font-weight: bold" label="商品标题：">
              <el-input :disabled="true" v-model="showCommodity.commodityTitle" placeholder="商品标题"></el-input>
            </el-form-item>

            <el-form-item style="font-size: medium; font-weight: bold" label="商品分类：">
              <el-select :disabled="true" v-model="showCommodity.commodityCategory" size="small" placeholder="全部">
              </el-select>
            </el-form-item>

            <el-form-item :disabled="true" style="font-size: medium; font-weight: bold" label="商品编码：">
              <el-input v-model="showCommodity.commodityCode" placeholder="商品编码"></el-input>
            </el-form-item>

            <el-form-item>
              <div style="font-size: 13px; font-weight: bold">商品图片</div>
                <img height="80px" width="80px" :src="showCommodity.commodityPicture" alt="暂无图片"/>
            </el-form-item>

            <el-form-item style="font-size: medium; font-weight: bold" label="商品价格：">
              <el-input :disabled="true" v-model="showCommodity.commodityPrice" size="medium" placeholder="商品价格"></el-input>
            </el-form-item>

            <el-form-item style="font-size: medium; font-weight: bold" label="商品库存：">
              <el-input-number :disabled="true" v-model="showCommodity.commodityStock" size="small" controls-position="right" :min="0"></el-input-number>
            </el-form-item>

            <el-form-item style="font-size: medium; font-weight: bold" label="品类描述：">
              <el-input :disabled="true" v-model="showCommodity.commodityDescription" size="medium" type="textarea" :rows="2" placeholder="请输入内容"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" plain:true @click="back">返回</el-button>
            </el-form-item>

          </el-form>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
  import commonHead from "../../system/common/commonHead";
    export default {
        name: "showCommodity",
        components: {commonHead},
        data(){
          return {
            showCommodity: {
              commodityName: '',
              commodityTitle: '',
              commodityCategory: '',
              commodityCode: '',
              commodityPicture: '',
              commodityPrice: '',
              commodityStock: '',
              commodityDescription: ''
            },

            //图片上传相关
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false
          }
        },

      mounted(){
          this.created();
      },

      methods: {
        //展示当前的商品详情
        created(){
          this.axios.get("micro-mall-server/commodity/getCommodityById/" + this.$route.query.commodityId).then(res => {
            console.log(res);
            this.showCommodity = res.data.data;
          });
        },

        //返回
        back(){
          this.$router.push({
            path: 'goods_manage'
          })
        },

        //图片文件上传
        handleRemove(file) {
          console.log(file);
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        handleDownload(file) {
          console.log(file);
        },
      }
    }
</script>

<style scoped>
  .box-card{
    position: absolute;
    top: 40%;
  }
</style>
